<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>新东方顶部导航菜单</title>
	<style type="text/css">
		
	
  	 #nav { 
   		background-color: gainsboro;
		position: relative; 
   	 	width: 1000px; 
   		 height:50px; 
 		color:black; 
	
		} 
	#nav ul { 
		position: absolute;
		list-style-type: none; 
		left: 200px;
		top: -20px;

		} 
	#nav ul li { 
		float: left; 
		position: relative; 
		} 
	#nav ul li a { 
		text-align: center; 
		padding:20px; 
		display:block; 
		text-decoration:none; 
		color:#999; 
		} 
	#nav ul li ul { 
		width: 300px;
		height: 300px;
		display: none;
		position: absolute;
		left: 0px;
		top: 50px; 
		} 
	#nav ul li:hover ul { 
		border: 1px solid black;
		display: block; 
		position: absolute;
		left: 0px; 
		} 
	#nav ul li:hover ul li a { 
	
		color:blue; 
		} 
	#nav ul li:hover ul li a:hover { 
		background:yellow; 
		 color:black; 
		} 

	
		
	</style>
	<body>
		<div id=nav>
			<img src="../img/logo.gif" height="50px" / >
			<ul>
				<li><a href="#">购物车 <img src="../img/open_icon.gif"/></a></li>
				<li><a href="#">优惠券<img src="../img/open_icon.gif"/></a></li>
				<li><a href="#">快速注卡<img src="../img/open_icon.gif"/></a></li>
				<li><a href="#">各地购课<img src="../img/open_icon.gif"/></a></li>
				<li><a href="#">手机报<img src="../img/open_icon.gif"/></a>
					<ul>
					<li><a target="_blank" href="#">托福 雅思 考研 职称英语 初中 日语 </a></li>
					<li><a target="_blank" href="#">网络课堂 资讯中心 知识堂 大师讲坛 学习论坛 学词 考研搜校 </a></li>
					<li><a target="_blank" href="#">M-Zone 手机报 时时英语</a></li>
					</ul>					
					</li>
			</ul>
		</div>
	</body>
</html>
